<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-03-21 11:34:22
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-03-16 16:24:17
 * @FilePath: /tea-garden-web/src/App.vue
 * @Description: 路由入口
-->
<template>
  <router-view />
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  computed: {
    ...mapState('system-login', ['userInfo'])
  },
  methods: {
    ...mapActions('common', ['getDicts']),
    // 数据大屏自适应函数
    handleScreenAuto () {
      // 设计稿的宽度
      const designDraftWidth = 1280
      // 设计稿的高度
      const designDraftHeight = 720
      // 根据屏幕的变化适配的比例
      const scaleW = document.documentElement.clientWidth / designDraftWidth
      const scaleH = document.documentElement.clientHeight / designDraftHeight
      // 缩放比例
      document.querySelector('#app').style.transform = `scale(${scaleW},${scaleH})`
    }
  },
  created () {
    // 数据清空跳转
    if (window.location.href.indexOf('system-login') === -1 && !this.userInfo) {
      this.$router.push({ path: 'system-login' })
    }
    this.getDicts()
  },
  mounted () {
    // 初始化自适应  ----在刚显示的时候就开始适配一次
    this.handleScreenAuto()
    // 绑定自适应函数   ---防止浏览器栏变化后不再适配
    window.onresize = () => this.handleScreenAuto()
  },
  beforeUnmount () {
    window.onresize = null
  }
}
</script>

<style lang="scss">
#app {
  /* 1920 1080 */
  // transform: scale(1.5, 1.35);
  /* 2560 1600 */
  // transform: scale(2, 2);
  transform-origin: left top;
  width: 1280px;
  height: 720px;
}
</style>
